<template>
	<el-menu
	  :default-active="activeIndex"
	  class="el-menu-demo"
	  mode="horizontal"
	  :ellipsis="false"
	  @select="handleSelect"
	>
	<el-menu-item index="0" style="font-size:xx-large;font-weight: bolder;">
				<el-icon :size="40" style="margin-right: 15px">
					<OfficeBuilding />
				</el-icon>
				<!-- <el-image src="/src/assets/favicon.jpg" fit="cover" /> -->
				<!-- <img src="@/assets/logo.png" alt=""> -->
				<span style="font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serifWISDOM CITY;">面向政务应用的数据治理与数据共享</span>
			</el-menu-item>
	  <div class="flex-grow" />
	  <el-menu-item index="1">Processing Center</el-menu-item>
	  <el-sub-menu index="2">
		<template #title>Workspace</template>
		<el-menu-item index="2-1">item one</el-menu-item>
		<el-menu-item index="2-2">item two</el-menu-item>
		<el-menu-item index="2-3">item three</el-menu-item>
		<el-sub-menu index="2-4">
		  <template #title>item four</template>
		  <el-menu-item index="2-4-1">item one</el-menu-item>
		  <el-menu-item index="2-4-2">item two</el-menu-item>
		  <el-menu-item index="2-4-3">item three</el-menu-item>
		</el-sub-menu>
	  </el-sub-menu>
	</el-menu>
  </template>
  
  <script lang="ts" setup>
  import { ref } from 'vue'
  
  const activeIndex = ref('1')
  const handleSelect = (key: string, keyPath: string[]) => {
	console.log(key, keyPath)
  }
  </script>
  
  <style>
  .flex-grow {
	flex-grow: 1;
  }
  </style>